<template>
    <el-container>
        <el-header class="afterLoginelementViewHeader">
            <div class="header-right">
                <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input"></el-input>
                <el-button type="primary" @click="goToSearchPage" class="selectBtn">搜索</el-button>
            </div>

            <div class="header-left">
                <el-button @click="goToPostPage" style="margin-right: 20px;">发帖</el-button>
                <el-dropdown trigger="click" class="dropdown">
                    <el-avatar style="margin-top: 25px; background-color: RGB(64,158,255);"> {{ userName }} </el-avatar>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><el-button-text
                                @click="goToUserInformation">我的空间</el-button-text></el-dropdown-item>
                        <el-dropdown-item>
                            <el-button-text @click="handleLogout">登出</el-button-text></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>

        <el-container style="height: 100vh;">
            <el-aside width="200px" height="200px">
                <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#f7f7f7" text-color="#000000"
                    active-text-color="#2775b6">
                    <el-menu-item>
                        <span style="font-weight:bold;font-size: 20px;">whx论坛系统</span>
                    </el-menu-item>

                    <el-menu-item @click="showAllArticles()">
                        <i class="el-icon-notebook-2"></i>
                        <span slot="title">所有帖子</span>
                    </el-menu-item>

                    <el-submenu>
                        <template slot="title">
                            <i class="el-icon-notebook-1"></i>
                            <span slot="title" style="font-weight:bold;font-size: 18px;">分类</span>
                        </template>
                        <el-menu-item v-for="(module, index) in modules" :key="module.moduleId" :index="index + 2"
                            @click="handleMenuItemClick(module.moduleName)">
                            <i class="el-icon-notebook-2"></i>
                            <span slot="title">{{ module.moduleName }}</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-main>
                <el-table v-loading="loading" :data="articles">
                    <el-table-column prop="module" label="类别" width="140">
                        <template slot-scope="scope">
                            {{ modules[scope.row.module].moduleName }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="poster" label="作者" width="120">
                        <template slot-scope="scope">
                            {{ users[scope.row.poster].userName }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="150"></el-table-column>
                    <el-table-column prop="content" label="帖子">
                        <template slot-scope="scope">
                            <div class="table-cell-content">{{ scope.row.content }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="postTime" label="发布时间" width="100"></el-table-column>
                    <el-table-column width="100">
                        <template slot-scope="scope">
                            <el-button @click="goToshowPost(scope.row.postId)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>
  
<script>

export default {
    data() {
        return {
            searchValue: "",
            isLogged: false,
            articles: [],
            allarticles: [],
            loading: true
        };
    },
    async created() {
        this.userId = this.$route.params.userId;
        this.userName = this.$route.params.userName;
        await this.$axios.get('https://localhost:44300/api/User/getallUser')
            .then(response => {
                const users = response.data.response;
                this.users = {};
                users.forEach(user => {
                    this.users[user.userId] = user;
                });
                this.$forceUpdate();
            })
            .catch(error => {
                console.error(error);
            });

        await this.$axios.get('https://localhost:44300/api/Module/getAll')
            .then(response => {
                const modules = response.data.response;
                this.modules = {};
                modules.forEach(module => {
                    this.modules[module.moduleId] = module;
                });
                this.$forceUpdate();
            })
            .catch(error => {
                console.error(error);
            });

        await this.$axios.get('https://localhost:44300/api/Post/getAll')
            .then(response => {
                this.allarticles = this.articles = response.data.response;
                this.$forceUpdate();
                this.loading = false
            })
            .catch(error => {
                console.error(error);
            });

    },
    methods: {
        goToSearchPage() {
            if (this.searchValue.trim() === '') {
                // 如果搜索框为空则不跳转到搜索页面
                return;
            }
            this.$router.push({ name: 'searchPage', params: { value: this.searchValue, backPage: 'afterLogin', userId: this.userId, userName: this.userName } });
            // 根据 this.searchValue 进行搜索
        },
        goToAdmin() {
            this.$router.push("/adminMain");
        },
        goToLogin() {
            this.$router.push("/login");
        },
        goToRegister() {
            this.$router.push("/register")
        },
        goToPostPage() {
            this.$router.push({ name: 'postPage', params: { userId: this.userId, userName: this.userName, backPage: 'afterLogin' } })
        },
        goToUserInformation() {
            this.$router.push({ name: 'userInformation', params: { userId: this.userId, userName: this.userName, backPage: 'afterLogin' } })
        }, goToshowPost(postId) {
            this.$router.push({ name: 'showPost', params: { postId: postId, userId: this.userId, userName: this.userName, backPage: 'afterLogin' } });
        },
        handleLogout() {
            // this.isLogged = false;
            this.$router.push('/login');
        },
        handleMenuItemClick(module) {
            this.loading = true;
            this.$axios.get('https://localhost:44300/api/Post/ModuleSelect', {
                params: {
                    moduleName: module
                }
            }).then(response => {
                this.articles = response.data.response;
                this.loading = false;
            })
                .catch(error => {
                    console.error(error);
                });
        }, showAllArticles() {
            this.articles = this.allarticles;
        }
    },
};

</script>
  
<style scoped>
.afterLoginelementViewHeader {
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    box-shadow: 0 0 5px #aaa;
}

.header-left {
    display: flex;
    align-items: center;

}

.header-right {
    display: flex;
    align-items: center;
    margin: auto;
}

.el-aside {
    background-color: #f7f7f7;
    box-shadow: -5px 0px 5px -5px #aaa;
}

.dropdown {
    margin-right: 20px;
}

.input {
    width: 350px;
    margin-right: 10px;
}

.selectBtn {
    width: 100px;
}

.table-cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
  